<!-- 地址组件 -->
<template>
    <el-cascader
            :options="cities"
            :props="props"
            @active-item-change="handleItemChange"
            @change="change"
            :value="initValue"
            class="get-addr"
    >
    </el-cascader>
</template>

<script lang="ts">
    import { Vue, Component, Prop } from 'vue-property-decorator';
    @Component({})
    export default class FormAddress extends Vue {
        @Prop () addressFilterSource: string;
        cities = []             // options：可选数据源
        props = {               // props：是一个对象，相关配置如下
            value: 'id',
            label: 'address_name',
            children: 'cities'
        }
        initValue = []         // value：选中项绑定值
        // active-item-change：当父级选项发生变化是触发，各父级选项组成的数组（所以在调用的时候，默认参数要传数组）
        async handleItemChange (ids) {
            if (this.addressFilterSource == 'queryBank') {
                if(ids.length === 0){
                    this.cities = await this.getAddr('0',false);
                }else if(ids.length === 1){
                    for (let i = 0; i < this.cities.length; i++) {
                        if (this.cities[i].id === ids[0]) {
                            this.cities[i].cities = await this.getAddr(ids[0], true);
                        }
                    }
                }
            }else {
                if(ids.length === 0){
                    this.cities = await this.getAddr('0',false);
                }else if(ids.length === 1){
                    if(ids[0] == 1 || ids[0] == 20 || ids[0] == 860 || ids[0] == 2462){
                        for (let i = 0; i < this.cities.length; i++) {
                            if (this.cities[i].id === ids[0]) {
                                this.cities[i].cities = await this.getAddr(ids[0]+1, true);
                            }
                        }
                    }else{
                        for (let i = 0; i < this.cities.length; i++) {
                            if (this.cities[i].id === ids[0]) {
                                this.cities[i].cities = await this.getAddr(ids[0], false);
                            }
                        }
                    }

                }else if (ids.length === 2) {
                    for (let i = 0; i < this.cities.length; i++) {
                        if (this.cities[i].id === ids[0]) {
                            for (let j = 0; j < this.cities[i].cities.length; j++) {
                                if (this.cities[i].cities[j].id === ids[1]) {
                                    this.cities[i].cities[j].cities = await this.getAddr(ids[1], true);
                                }
                            }
                        }
                    }
                }
            }
        }
        // 获取地址请求
        async getAddr (parentId, isEnd) {
            let response = await this.$http.get(`otherconstants/addressNext/${parentId}`,{},{loading: false})
            if(!isEnd){
                response.data.forEach(v => v.cities = []);
            }
            return response.data;
        }
        mounted () {
            this.handleItemChange([]);
        }
        // change：当绑定事件触发时，回调是当前值
        change (areas) {
            this.$emit('input', areas);
        }
        async init (initValue) {
            this.initValue = initValue;
            setTimeout(async () => {
                if(initValue.length == 3){
                    for (let i = 0; i < this.cities.length; i++) {
                        if (this.cities[i].id === initValue[0]) {
                            this.cities[i].cities = await this.getAddr(initValue[0], false);
                            for (let j = 0; j < this.cities[i].cities.length; j++) {
                                if (this.cities[i].cities[j].id === initValue[1]) {
                                    this.cities[i].cities[j].cities = await this.getAddr(initValue[1], true);
                                }
                            }
                        }
                    }
                }else {
                    for (let i = 0; i < this.cities.length; i++) {
                        if (this.cities[i].id === initValue[0]) {
                            this.cities[i].cities = await this.getAddr(initValue[0]+1, true);
                        }
                    }
                }

            }, 400)
            this.$emit('input', initValue);
        }
    }
</script>

<style lang="scss" scoped>

</style>
<style lang="scss">
    .get-addr {
        .el-input__inner {
            height: $height-int-register;
            width: $width-int-register;
        }
    }
</style>